<template>

  <h2>响应式基础</h2>
  <div class="note">
    <p>1. ref、reactive 可用于实现响应式，即数据变化时视图自动更新。</p>
    <p>2. ref声明的变量在script中使用时需.value获取值，在模板{{}}中使用不需要加;reactive声明的变量直接使用</p>
    <p>3. ref可用于声明基本类型变量和对象，reactive只用于声明对象</p>
    <p>4. ref声明的变量，返回RefImpl对象，该对象具有value属性，可用于获取变量值；reactive声明的变量，返回Proxy代理</p>
  </div>

  <hr class="hr-style" />
  <div class="note">
    ref 和 reactive 在使用上和原理上的区别:
    <p>1>ref使用的时候需要加.value </p>
    <p>2>ref会自动判断赋值的类型.如果是普通类型直接赋值，如果是引用类型会用 reactive包裹成深层响应式对象 </p>
    <p>3>在使用的时候推荐使用ref，因为ref从g根上修改值的时候不会失去响应性，相反reactive 从根上重新赋值就会丢失响应性 </p>
  </div>



  <hr class="hr-style" />
  <h3>ref()</h3>
  <div>
    <div>观察ref声明的变量响应式变化效果：{{ count }}</div>
    <button @click="count++">count++</button>
  </div>

  <hr class="hr-style" />
  <h3>relative()</h3>
  <div>
    <div>观察reactive声明的变量响应式变化效果：{{ state.count }}</div>
    <button @click="state.count++">state.count++</button>
  </div>

  <hr class="hr-style" />
  <h2>reactive()的局限性</h2>
  <div class="note">
    <p>1. 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。</p>
    <p>2. 不能替换整个对象</p>
    <p>3. 对解构操作不友好:当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接</p>
  </div>
</template>



<script lang="ts">
export default {
  name: 'Study3StuDemo2'
}
</script>

<script setup lang="ts">
import { ref,reactive } from 'vue'

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

const state = reactive({count: 0})
console.log(state) // { count: 0 }
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
